<template>
  <section class="modular">
      <h3>推荐歌单 ></h3>
      <div class="list">
          <div class="wrape" 
            v-for="item in listInfo"
            :key="item.id"
          >
            <img :src= "item.picUrl" alt="">
            <span>{{item.name}}</span>
          </div>
      </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      moreList: [],
      listInfo: []
    };
  },
  mounted() {
    this.$http.get("http://localhost:3000/personalized").then(d => {
      if (d.status == 200 && d.data && d.data.code == 200) {
        this.moreList = d.data.result;
        this.listInfo = this.moreList.slice(0, 6);
      }

      console.log(this.listInfo);
    });
  }
};
</script>
<style scoped lang='less'>
@rem :0.024275rem;
h3 {
  padding-left: 5*@rem;
  border-left: 2px solid red;
  margin-bottom: 3px;
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .wrape {
    width: 32%;
    margin-bottom: 4px;
    img {
      width:100%;
      height: 120*@rem;
    }
  }
}
</style>

